<template>
  <el-dialog :title="title"
             :visible.sync="visible"
             v-loading="loading"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             width="30%">

    <el-form ref="formRef"
             :model="formModel"
             :rules="formRules"
             label-width="120px">
      <el-form-item label="素材名称："
                    prop="name">
        <el-input v-model="formModel.name"
                  placeholder="请输入素材名称"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="png图片名称："
                    prop="pngName">
        <el-input v-model="formModel.pngName"
                  placeholder="请输入png图片名称"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="png图片："
                    prop="pngLogUrl">
        <el-upload class="avatar-uploader"
                   :action="imageUploadUrl"
                   :show-file-list="false"
                   list-type="picture-card"
                   accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                   :on-success="(response, file, fileList) =>uploadSuccess(response, file, fileList, 'pngImg')"
                   :before-upload="file =>beforeUpload(file, 'pngImg')">
          <img v-if="formModel.pngLogUrl"
               :src="formModel.pngLogUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="psd名称："
                    prop="pdfName">
        <el-input v-model="formModel.pdfName"
                  placeholder="请输入psd名称"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="psd文件："
                    prop="psdFile">
        <el-upload :action="imageUploadUrl"
                   :on-success="(response, file, fileList)=>uploadSuccess(response, file, fileList, 'psdFile')"
                   :limit="1"
                   list-type="picture-card"
                   accept=".psd,.PSD"
                   :before-upload="file =>beforeUpload(file, 'psdFile')">
          <el-button size="small"
                     slot="trigger"
                     type="primary">选取文件</el-button>
          <div slot="tip"
               class="el-upload__tip">只能上传PSD文件，且不超过一个</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button type="info"
                 @click="modalClose">取 消</el-button>
      <el-button type="primary"
                 @click="submitForm">新 增</el-button>
    </p>
  </el-dialog>
</template>
<script>
  export default {
    name: 'materialDialog', // 素材管理弹窗
    props: {
      dataObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        title: '新 增',
        loading: false,
        imageUploadUrl: this.api.appUpgradeUpload.url,
        formModel: {
          name: '',
          pngName: '',
          pngLogUrl: '',
          pdfName: '',
          pdfUrl: '',
          themeId: JSON.parse(this.$route.query.routeParams).id
        },
        formRules: {
          name: [{ required: true, message: '请输入素材名称', trigger: 'blur' }]
        },
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },
      submitForm () {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            this.post(this.api.promote.saveSourceMaterial, this.formModel).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功!');
                this.modalClose();
                this.$parent.getList();
              }
            })
          }
        })
      },
      // 上传前的方法
      beforeUpload (file, option) {
        let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp']
        const isJPG = types.includes(file.type);
        const currType = file.type === file.name.substring(file.name.lastIndexOf(".") + 1);
        if (option === 'pngImg') {
          if (!isJPG) {
            this.$message.error('上传图片必须是JPG/JPEG/GIF/PNG/BMP 格式!');
            return isJPG;
          }
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!');
            return isLt2M;
          }
        }
        if (option === 'psdFile') {
          if (!currType) {
            this.$message.error('上传文件必须是PSD格式!');
            return currType;
          }
        }
      },
      // 上传前的方法
      uploadSuccess (response, file, fileList, option) {
        if (response.code === '200') {
          // 状态码为200时则上传成功
          if (option === 'psdFile') {
            this.formModel.pdfUrl = file.response.object[0];
          }
          if (option === 'pngImg') {
            this.formModel.pngLogUrl = file.response.object[0];
          }
          this.$message.success('上传成功');
        } else {
          // 状态码不是200时上传失败 从列表中删除
          fileList.splice(fileList.indexOf(file), 1);
          this.$message.error(response.message);
        }
      },
    },
    created () {
      if (this.dataObj) {
        this.title = '编 辑';
        this.formModel = this.dataObj;
      }
    }
  }
</script>
<style scoped lang="scss">
  .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /deep/ .el-upload {
      .avatar {
        display: block;
        width: 148px;
        height: 148px;
      }
      &.el-upload--picture-card {
        width: 148px;
        height: 148px;
        line-height: 148px;
        overflow: hidden;
      }
      &:hover {
        border-color: #409eff;
      }
    }
  }
</style>